<template>
	<view class="vi_clock">
		<!-- 钟盘切换 -->
		<view class="vi_clock_tabs" :style="tabStyle">
			<view class="vi_clock_tabItem" v-if="setting.useHour">
				<vi-style-controller @click="onTab('hour')"
					:type="setting.type"
					:color="color"
					:textColor="textColor"
					:radius="tabRadius"
					:plain="plain"
					:height="setting.tabHeight"
					:active="currTep=='hour'">
					{{textSetting.tabHour}}
				</vi-style-controller>
			</view>
			<view class="vi_clock_tabItem" v-if="setting.useMinute">
				<vi-style-controller @click="onTab('minute')"
					:type="setting.type"
					:color="color"
					:textColor="textColor"
					:radius="tabRadius"
					:plain="plain"
					:height="setting.tabHeight"
					:active="currTep=='minute'">
					{{textSetting.tabMinute}}
				</vi-style-controller>
			</view>
			<view class="vi_clock_tabItem" v-if="setting.useSecond">
				<vi-style-controller @click="onTab('second')"
					:type="setting.type"
					:color="color"
					:textColor="textColor"
					:radius="tabRadius"
					:plain="plain"
					:height="setting.tabHeight"
					:active="currTep=='second'">
					{{textSetting.tabSecond}}
				</vi-style-controller>
			</view>
		</view>
		<!-- 钟盘 -->
		<view class="vi_clock_dial" :style="dialStyle">
			<!-- 刻度数字 -->
			<!-- 为解决小程序key冲突且无法拼接key格式的问题，只能外包一层 -->
			<view>
				<view class="vi_clock_tickNumber" v-for="(item,index) in tickVols" :key="index"
					:style="{
						'left': tickPoint[index*5].x,
						'top': tickPoint[index*5].y
					}"
					@click="onTickNumber(item)">
					<vi-style-controller
						:type="setting.type"
						:color="color"
						:textColor="textColor"
						:plain="plain"
						radius="circle"
						width="1.75em"
						height="1.75em"
						:active="(currTep=='hour'&&hour==item)||(currTep=='minute'&&minute==item)||(currTep=='second'&&second==item)">
						{{item}}
					</vi-style-controller>
				</view>
			</view>
			<!-- 刻度 -->
			<view class="vi_clock_tickMark" :class="{'vi_clock_hide':index%5==0}" v-for="(item,index) in tickPoint" :key="index"
				:style="{
					'left': item.x,
					'top': item.y
				}">
				<vi-style-controller
					:type="setting.type"
					:color="color"
					basicBackground="#eee"
					radius="circle"
					width="0.5em"
					height="0.5em"
					:active="(currTep=='minute'&&minute==index)||(currTep=='second'&&second==index)">
				</vi-style-controller>
			</view>
			<!-- 原点 -->
			<view class="vi_clock_origin">
				<vi-style-controller
					control="border"
					:type="setting.type"
					:color="color"
					borderWidth="0.2em"
					borderBox
					backgroundColor="#fff"
					radius="circle"
					width="0.75em"
					height="0.75em"
					active>
				</vi-style-controller>
			</view>
			<!-- 时针 -->
			<view class="vi_clock_hourHand" v-if="setting.useHour"
				:style="{'transform':'translateY(-50%) rotate('+(hour%12*30-90)+'deg)'}">
				<view class="vi_clock_pointer"
					:style="{
						'left':pointerSetting.hourShift,
						'width':pointerSetting.hourWidth
					}">
					<vi-style-controller
						control="background"
						:type="pointerSetting.hourType"
						:color="pointerSetting.hourColor"
						:height="pointerSetting.hourHeight"
						radius="circle"
						alignLeft
						active>
					</vi-style-controller>
				</view>
			</view>
			<!-- 分针 -->
			<view class="vi_clock_minuteHand" v-if="setting.useMinute"
				:style="{'transform':'translateY(-50%) rotate('+(minute%60*6-90)+'deg)'}">
				<view class="vi_clock_pointer"
					:style="{
						'left':pointerSetting.minuteShift,
						'width':pointerSetting.minuteWidth
					}">
					<vi-style-controller
						control="background"
						:type="pointerSetting.minuteType"
						:color="pointerSetting.minuteColor"
						:height="pointerSetting.minuteHeight"
						radius="circle"
						alignLeft
						active>
					</vi-style-controller>
				</view>
			</view>
			<!-- 秒针 -->
			<view class="vi_clock_secondHand" v-if="setting.useSecond"
				:style="{'transform':'translateY(-50%) rotate('+(second%60*6-90)+'deg)'}">
				<view class="vi_clock_pointer"
					:style="{
						'left':pointerSetting.secondShift,
						'width':pointerSetting.secondWidth
					}">
					<vi-style-controller
						control="background"
						:type="pointerSetting.secondType"
						:color="pointerSetting.secondColor"
						:width="pointerSetting.secondWidth"
						:height="pointerSetting.secondHeight"
						radius="circle"
						alignLeft
						active>
					</vi-style-controller>
				</view>
			</view>
			<!-- 上下午 -->
			<view class="vi_clock_part">
				<vi-style-controller @click="changePart"
					:control="['text','border']"
					:type="setting.type"
					:color="color"
					:textColor="textColor"
					:borderWidth="[0,0,1,0]"
					height="1.75em"
					active>
					<text>{{textSetting[currPart]}}</text>
				</vi-style-controller>
			</view>
		</view>
		<!-- 工具栏 -->
		<view class="vi_clock_toolbar" :style="toolbarStyle">
			<!-- 时 -->
			<view class="vi_clock_toolbox" :class="{'vi_clock_toolStraight':toolStraight}" :style="toolStyle" v-if="setting.useHour">
				<view 
					@touchstart="touchPass($event, 'start', 1,'hour')"
					@touchmove="touchPass($event, 'move')"
					@touchend="touchPass($event, 'end')">
					<vi-style-controller
						type="default"
						:width="toolStraight?'1.75em':''"
						:height="toolStraight?'100%':'1.5em'"
						:radius="toolStraight?['0.25em',0,0,'0.25em']:['0.25em','0.25em',0,0]"
						active>
						<text class="iconfont icon-arr-up"></text>
					</vi-style-controller>
				</view>
				<view class="vi_clock_valueBox">
					<scroll-view class="vi_clock_roller" v-if="useScrollBox"
						scroll-y
						:scroll-into-view="'h'+hourValTo"
						:scroll-top="hourTop"
						@scroll="scrollHour"
						@touchmove.stop>
						<view class="vi_clock_value" :id="'h'+item" v-for="(item,index) in hourList" :key="index">
							<text>{{item}}</text>
							<text class="vi_clock_valueSpace">{{textSetting.unitHour}}</text>
						</view>
					</scroll-view>
					<view class="vi_clock_value" v-else>
						<text>{{hour}}</text>
						<text class="vi_clock_valueSpace">{{textSetting.unitHour}}</text>
					</view>
				</view>
				<view
					@touchstart="touchPass($event, 'start', -1,'hour')"
					@touchmove="touchPass($event, 'move')"
					@touchend="touchPass($event, 'end')">
					<vi-style-controller
						type="default"
						:width="toolStraight?'1.75em':''"
						:height="toolStraight?'100%':'1.5em'"
						:radius="toolStraight?[0,'0.25em','0.25em',0]:[0,0,'0.25em','0.25em']"
						active>
						<text class="iconfont icon-arr-down"></text>
					</vi-style-controller>
				</view>
			</view>
			<!-- 分 -->
			<view class="vi_clock_toolbox" :class="{'vi_clock_toolStraight':toolStraight}" :style="toolStyle" v-if="setting.useMinute">
				<view
					@touchstart="touchPass($event, 'start', 1,'minute')"
					@touchmove="touchPass($event, 'move')"
					@touchend="touchPass($event, 'end')">
					<vi-style-controller
						type="default"
						:width="toolStraight?'1.75em':''"
						:height="toolStraight?'100%':'1.5em'"
						:radius="toolStraight?['0.25em',0,0,'0.25em']:['0.25em','0.25em',0,0]"
						active>
						<text class="iconfont icon-arr-up"></text>
					</vi-style-controller>
				</view>
				<view class="vi_clock_valueBox">
					<scroll-view class="vi_clock_roller" v-if="useScrollBox"
						scroll-y
						:scroll-into-view="'m'+minuteValTo"
						:scroll-top="minuteTop"
						@scroll="scrollMinute"
						@touchmove.stop>
						<view class="vi_clock_value" :id="'m'+item" v-for="(item,index) in minuteList" :key="index">
							<text>{{item}}</text>
							<text class="vi_clock_valueSpace">{{textSetting.unitMinute}}</text>
						</view>
					</scroll-view>
					<view class="vi_clock_value" v-else>
						<text>{{minute}}</text>
						<text class="vi_clock_valueSpace">{{textSetting.unitMinute}}</text>
					</view>
				</view>
				<view
					@touchstart="touchPass($event, 'start', -1,'minute')"
					@touchmove="touchPass($event, 'move')"
					@touchend="touchPass($event, 'end')">
					<vi-style-controller
						type="default"
						:width="toolStraight?'1.75em':''"
						:height="toolStraight?'100%':'1.5em'"
						:radius="toolStraight?[0,'0.25em','0.25em',0]:[0,0,'0.25em','0.25em']"
						active>
						<text class="iconfont icon-arr-down"></text>
					</vi-style-controller>
				</view>
			</view>
			<!-- 秒 -->
			<view class="vi_clock_toolbox" :class="{'vi_clock_toolStraight':toolStraight}" :style="toolStyle" v-if="setting.useSecond">
				<view
					@touchstart="touchPass($event, 'start', 1,'second')"
					@touchmove="touchPass($event, 'move')"
					@touchend="touchPass($event, 'end')">
					<vi-style-controller
						type="default"
						:width="toolStraight?'1.75em':''"
						:height="toolStraight?'100%':'1.5em'"
						:radius="toolStraight?['0.25em',0,0,'0.25em']:['0.25em','0.25em',0,0]"
						active>
						<text class="iconfont icon-arr-up"></text>
					</vi-style-controller>
				</view>
				<view class="vi_clock_valueBox">
					<scroll-view class="vi_clock_roller" v-if="useScrollBox"
						scroll-y
						:scroll-into-view="'s'+secondValTo"
						:scroll-top="secondTop"
						@scroll="scrollSecond"
						@touchmove.stop>
						<view class="vi_clock_value" :id="'s'+item" v-for="(item,index) in minuteList" :key="index">
							<text>{{item}}</text>
							<text class="vi_clock_valueSpace">{{textSetting.unitSecond}}</text>
						</view>
					</scroll-view>
					<view class="vi_clock_value" v-else>
						<text>{{second}}</text>
						<text class="vi_clock_valueSpace">{{textSetting.unitSecond}}</text>
					</view>
				</view>
				<view
					@touchstart="touchPass($event, 'start', -1,'second')"
					@touchmove="touchPass($event, 'move')"
					@touchend="touchPass($event, 'end')">
					<vi-style-controller
						type="default"
						:width="toolStraight?'1.75em':''"
						:height="toolStraight?'100%':'1.5em'"
						:radius="toolStraight?[0,'0.25em','0.25em',0]:[0,0,'0.25em','0.25em']"
						active>
						<text class="iconfont icon-arr-down"></text>
					</vi-style-controller>
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="vi_clock_submitBtn" v-if="setting.useSubmit">
			<vi-button @click="submit"
				:type="setting.type"
				:color="color"
				:radius="setting.submitRadius"
				:size="setting.submitSize"
				:plain="submitPlain"
				:width="setting.submitWidth"
				:height="submitHeight"
				:disabled="disabled"
				:readOnly="readOnly">{{textSetting.confirm}}</vi-button>
		</view>
		<!-- 触屏事件处理器 -->
		<vi-touch-processor ref="touchProcessor" :longPressTime="500"
			@click="incVal"
			@move="touchButtonMove"
			@end="touchButtonEnd"
			@longPress="touchButtonLong"></vi-touch-processor>
	</view>
</template>

<script>
	export default{
		name:"",
		props:{
			//尺寸，半径
			radius:{
				type:[String,null],
				default:""
			},
			type:{
				type:[String,null],
				default:null
			},
			color:{
				type:[String,null],
				default:""
			},
			textColor:{
				type:[String,null],
				default:""
			},
			plain:{
				type:[Boolean,null],
				default:false
			},
			tabRadius:{
				type:[String,null],
				default:""
			},
			tabbarWidth:{
				type:[String,null],
				default:null
			},
			tabHeight:{
				type:[String,null],
				default:null
			},
			//使用小时
			useHour:{
				type:[Boolean,null],
				default:null
			},
			//使用分
			useMinute:{
				type:[Boolean,null],
				default:null
			},
			//使用秒
			useSecond:{
				type:[Boolean,null],
				default:null
			},
			//工具栏置于顶部
			toolbarTop:{
				type:[Boolean,null],
				default:false
			},
			toolWidth:{
				type:[String,null],
				default:null
			},
			//工具按钮横向化
			toolStraight:{
				type:[Boolean,null],
				default:false
			},
			//使用滚动盒
			useScrollBox:{
				type:[Boolean,null],
				default:false
			},
			//滚动盒手动初始化
			selfInitScrollBox:{
				type:[Boolean,null],
				default:false
			},
			//提交按钮
			useSubmit:{
				type:[Boolean,null],
				default:null
			},
			//提交按钮
			submitRadius:{
				type:[String,Number,null],
				default:null
			},
			submitSize:{
				type:[String,null],
				default:null
			},
			submitPlain:{
				type:[Boolean,null],
				default:false
			},
			submitWidth:{
				type:[String,null],
				default:null
			},
			submitHeight:{
				type:[Number,String,null],
				default:""
			},
			disabled:{
				type:[Boolean,null],
				default:false
			},
			readOnly:{
				type:[Boolean,null],
				default:false
			},
			//指针设置
			pointerSet:{
				type:[Object,null],
				default:()=>({})
			},
			text:{
				type:[Object,null],
				default:()=>({})
			},
			//传入值，可能的格式："时:分:秒"、时间戳、带时间日期、[时,分,秒]、{houre:时, minute:分, second:秒}
			value:{
				type:[String,Number,Date,Array,Object,null],
				default:""
			},
			//返回数据格式，传入value为有效日期时可选timestamp，ISO，UTC，和自定义格式串
			resFormat:{
				type:[String,null],
				default:""
			},
		},
		data(){
			return {
				isDate:false,		//传入值是否日期，影响返回值
				hour:0,
				minute:0,
				second:0,
				currTep:"",			//激活阶段，小时或分或秒
				currPart:"",		//当前上下午
				tickVols:[],		//刻度数字
				longPressTimer:null,
				//拆分滚动实现：
				//1、变更值触发自滚动(无滚动项高度数据，须用scroll-into-view实现)
				//2、手动滚动后矫正滚动位置（不能触发自滚动事件，会导致延时冲突，须用scroll-top实现）
				hourValTo:0,
				minuteValTo:0,
				secondValTo:0,
				hourTop:0,
				minuteTop:0,
				secondTop:0,
				hourTimer:null,
				minuteTimer:null,
				secondTimer:null,
				dicPointerSet:{		//指针设置
					hourShift: "15%",		//偏移原点距离
					hourType: "primary",
					hourColor: "",
					hourWidth: "40%",
					hourHeight: "0.3em",
					minuteShift: "15%",
					minuteType: "primary",
					minuteColor: "",
					minuteWidth: "65%",
					minuteHeight: "0.15em",
					secondShift: "-0.25em",
					secondType: "error",
					secondColor: "",
					secondWidth: "0.3em",
					secondHeight: "0.7em",
				},
				dicText:{
					tabHour: "时",
					tabMinute: "分",
					tabSecond: "秒",
					unitHour: "时",
					unitMinute: "分",
					unitSecond: "秒",
					AM: "上午",
					PM: "下午",
					confirm: "确定",
				},
			}
		},
		computed:{
			setting(){
				return {
					radius: this.radius ||"30vw",
					type: this.$api.isDefined(this.type)? this.type :"primary",
					tabbarWidth: this.$api.isDefined(this.tabbarWidth)? this.tabbarWidth :"60vw",
					tabHeight: this.$api.isDefined(this.tabHeight)? this.tabHeight :"2em",
					toolWidth: this.$api.isDefined(this.toolWidth)? this.toolWidth :"calc(20vw - 1em)",
					submitRadius: this.$api.isDefined(this.submitRadius)? this.submitRadius :"circle",
					submitSize: this.$api.isDefined(this.submitSize)? this.submitSize :"md",
					submitWidth: this.$api.isDefined(this.submitWidth)? this.submitWidth :"100%",
					useSubmit: this.$api.isBoolean(this.useSubmit)? this.useSubmit :true,
					useHour: this.$api.isBoolean(this.useHour)? this.useHour :true,
					useMinute: this.$api.isBoolean(this.useMinute)? this.useMinute :true,
					useSecond: this.$api.isBoolean(this.useSecond)? this.useSecond :true,
					resFormat: this.resFormat ||"timestamp",
				}
			},
			pointerSetting(){
				if(this.$api.isObject(this.pointerSet)){
					return Object.assign({},this.dicPointerSet,this.pointerSet)
				}
				return this.dicPointerSet
			},
			textSetting(){
				if(this.$api.isObject(this.text)){
					return Object.assign({},this.dicText,this.text)
				}
				return this.dicText
			},
			size(){
				let valUnit = this.$api.splitUnit(this.setting.radius);
				return valUnit[0] *2 + valUnit[1]
			},
			//上午时钟值
			hourVolAM(){
				let res =[];
				for(let i=0; i<12; i++){
					res.push(i)
				}
				return res
			},
			//下午时钟值
			hourVolPM(){
				let res =[];
				for(let i=0; i<12; i++){
					res.push(i +12)
				}
				return res
			},
			//分、秒刻度值
			minuteVol(){
				let res =[];
				for(let i=0; i<12; i++){
					res.push(i *5)
				}
				return res
			},
			//刻度坐标字典
			tickPoint(){
				let res =[];
				let valUnit = this.$api.splitUnit(this.setting.radius),
					baseVal = valUnit[0],
					unit = valUnit[1];
				for(let i=0; i<60; i++){
					let deg = i*Math.PI/30,
						x = (Math.sin(deg) +1) * baseVal + unit,
						y = (1- Math.cos(deg)) * baseVal + unit;
					res.push({x,y})
				}
				return res
			},
			//小时数全字典，微信小程序的for of直接循环下标从0开始，H5从1开始，存在重大问题
			hourList(){
				let res =[];
				for(let i=0; i<24; i++){
					res.push(i)
				}
				return res
			},
			//分、秒全字典
			minuteList(){
				let res =[];
				for(let i=0; i<60; i++){
					res.push(i)
				}
				return res
			},
			tabStyle(){
				let res ={
					width: this.setting.tabbarWidth,
					order: this.toolbarTop? 2:1
				}
				return this.$api.objToStr(res)
			},
			dialStyle(){
				let res ={
					width: this.size,
					height: this.size,
					order: this.toolbarTop? 3:2
				};
				return this.$api.objToStr(res)
			},
			toolbarStyle(){
				let res ={
					order: this.toolbarTop? 1:3,
				}
				if(this.toolbarTop){
					res["padding-bottom"] = "0.75em"
				}else{
					res["padding-top"] = "0.75em"
				}
				return this.$api.objToStr(res)
			},
			toolStyle(){
				return `width:${this.setting.toolWidth};`
			}
		},
		methods:{
			//生成时钟盘
			draw(){
				if(this.currTep=="hour"){//时钟
					if(this.currPart=="AM"){
						this.tickVols = this.hourVolAM
					}else if(this.currPart=="PM"){
						this.tickVols = this.hourVolPM
					}
				}else{
					this.tickVols = this.minuteVol
				}
			},
			//点击tab
			onTab(val){
				this.currTep = val;
				this.draw();
			},
			//点击刻度数字
			onTickNumber(val){
				switch(this.currTep){
					case "hour":
						this.hour = val;
						break;
					case "minute":
						this.minute = val;
						break;
					case "second":
						this.second = val;
						break;
				}
				this.onChange();
			},
			//变更上下午
			changePart(){
				switch(this.currPart){
					case "AM":
						this.hour += 12;
						this.currPart="PM";
						break;
					case "PM":
						this.hour -= 12;
						this.currPart="AM";
						break;
				}
				this.draw();
				this.onChange();
			},
			//变更时间值
			incVal(val, type){
				let newVal;
				if(type=="hour"){
					newVal = this.hour + val;
					if(newVal<0){
						newVal =23
					}else if(newVal>23){
						newVal =0
					}
					this.currPart = newVal>11?"PM":"AM";
					this.hour = newVal;
					this.draw();
				}else{
					newVal = this[type] + val;
					if(newVal<0){
						newVal =59
					}else if(newVal>59){
						newVal =0
					}
					this[type] = newVal;
				}
				this.onChange();
			},
			//触屏事件传递
			touchPass(e, type, ...params){
				this.$refs.touchProcessor[type](e, ...params)
			},
			touchButtonMove(e, val, type){
				this.touchButtonEnd(e, val, type)
			},
			//按钮触摸结束
			touchButtonEnd(e, val, type){
				let timer = this.longPressTimer;
				if(timer){
					clearInterval(timer);
					this.longPressTimer = null;
				}
			},
			//按钮长按激活
			touchButtonLong(val, type){
				let _this = this;
				this.longPressTimer = setInterval(()=>{
					_this.incVal(val, type)
				},100)
			},
			//值变更
			onChange(fromScroll=false){
				//非滚动组件触发值变更，使用scroll-into-view变更滚动位置
				if(!fromScroll){
					this.hourValTo = this.hour;
					this.minuteValTo = this.minute;
					this.secondValTo = this.second;
				}
				this.$emit("change", {
					hour: this.hour,
					minute: this.minute,
					second: this.second
				})
			},
			//滚动事件执行函数，不能使用节流功能，创建计时器异步处理会导致 Blink deferred a task in order to make scrolling smoother。未知发生原因
			scrollHour(e){
				let data = e.detail,
					boxHeight = data.scrollHeight,//滚动区域高度，所有option的高度和
					top = data.scrollTop;//滚动高度
				let idx = Math.round(top/boxHeight*24);
				if(idx==this.hour){
					return
				}
				this.hour = idx;
				let part = idx>11?"PM":"AM";
				if(this.currPart != part){
					this.currPart = part;
					this.draw();
				}
				//重定位
				if(this.hourTimer){
					clearTimeout(this.hourTimer)
				}
				this.hourTimer = setTimeout(()=>{
					this.hourTop = boxHeight/24 *idx;
					this.hourTimer = null;
				},300)
				this.onChange(true);
			},
			scrollMinute(e){
				let data = e.detail,
					boxHeight = data.scrollHeight,//滚动区域高度，所有option的高度和
					top = data.scrollTop;//滚动高度
				let idx = Math.round(top/boxHeight*60);
				if(idx==this.minute){
					return
				}
				this.minute = idx;
				//重定位
				if(this.minuteTimer){
					clearTimeout(this.minuteTimer)
				}
				this.minuteTimer = setTimeout(()=>{
					this.minuteTop = boxHeight/60 *idx;
					this.minuteTimer = null;
				},300)
				this.onChange(true);
			},
			scrollSecond(e){
				let data = e.detail,
					boxHeight = data.scrollHeight,//滚动区域高度，所有option的高度和
					top = data.scrollTop;//滚动高度
				let idx = Math.round(top/boxHeight*60);
				if(idx==this.second){
					return
				}
				this.second = idx;
				//重定位
				if(this.secondTimer){
					clearTimeout(this.secondTimer)
				}
				this.secondTimer = setTimeout(()=>{
					this.secondTop = boxHeight/60 *idx;
					this.secondTimer = null;
				},300)
				this.onChange(true);
			},
			//设置滚动位置
			initScroll(){
				this.hourValTo = this.hour;
				this.minuteValTo = this.minute;
				this.secondValTo = this.second;
			},
			//提交
			submit(){
				this.$emit("submit", this.getData(), {
					hour: this.hour,
					minute: this.minute,
					second: this.second
				})
			},
			//提交数据
			getData(format){
				let res,
					h=this.hour,
					m=this.minute,
					s=this.second,
					resFormat = format || this.setting.resFormat;
				//传入为日期，返回也为日期，根据resFormat返回
				if(this.isDate){
					let D = new Date(this.value);
					D.setHours(h);
					D.setMinutes(m);
					D.setSeconds(s);
					switch(resFormat){
						case "timestamp":
							res = D.getTime();
							break;
						case "ISO":
							res = D.toISOString();
							break;
						case "UTC":
							res = D.toUTCString();
							break;
						default:
							if(typeof(resFormat)=="string"){
								res = this.$api.dateFormat(D, {format:resFormat})
							}
					}
				}else{
					let str ="",
						H = h<10? "0" + h :h,
						M = m<10? "0" + m :m,
						S = s<10? "0" + s :s,
						useH = this.setting.useHour,
						useM = this.setting.useMinute,
						useS = this.setting.useSecond;
					if(useH){
						str += H +(useM||useS?":":"");
					}
					if(useM||(useH&&useS)){
						str += M +(useS?":":"");
					}
					if(useS){
						str += S
					}
					res = str
				}
				return res
			},
		},
		watch:{
			"value":{
				immediate:true,
				handler(newValue){
					//格式：时间值、{hour:0,minute:0,second:0},[0,0,0]
					//判断是否日期格式
					let D = new Date(newValue),
						H =0,
						M =0,
						S =0;
					if(D.getTime()){
						this.isDate =true;
						H = D.getHours();
						M = D.getMinutes();
						S = D.getSeconds();
					}else{
						this.isDate =false;
						newValue = newValue ||"";
						let valType = this.$api.typeAsk(newValue);
						if(valType=="Object"){
							H = Number(newValue.hour) ||0;
							M = Number(newValue.minute) ||0;
							S = Number(newValue.second) ||0;
						}else{
							let valArr=[];
							if(valType=="Array"){
								valArr = newValue
							}else if(valType=="String"){
								valArr = this.$api.strToArr(String(newValue))
							}
							let i=0,
								setting=this.setting;
							if(setting.useHour){
								H = Number(valArr[i]) ||0;
								i++
							}
							if(setting.useMinute){
								M = Number(valArr[i]) ||0;
								i++
							}
							if(setting.useSecond){
								S = Number(valArr[i]) ||0
							}
						}
					}
					//值变更才能更新
					if(H!=this.hour || M!=this.minute || S!=this.second){
						this.hour = H;
						this.minute = M;
						this.second = S;
						//同步到工具条
						if(!this.selfInitScrollBox){
							this.$nextTick(()=>{
								this.hourValTo = H;
								this.minuteValTo = M;
								this.secondValTo = S;
							})
						}
					}
				}
			}
		},
		created(){
			//初始化
			let setting = this.setting;
			if(setting.useHour){
				this.currTep = "hour";
				this.currPart = "AM";
			}else if(setting.useMinute){
				this.currTep = "minute"
			}else if(setting.useSecond){
				this.currTep = "second"
			}
			this.draw();
		}
	}
</script>

<style lang="scss">
.vi_clock{
	width: 100;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.vi_clock_tabs{
		display: flex;
		align-items: center;
		padding-bottom: 0.75em;
	}
	.vi_clock_tabItem{
		flex-grow: 1;
	}
	.vi_clock_dial{
		position: relative;
		margin: 1em;
	}
	.vi_clock_tickNumber{
		position: absolute;
		z-index: 1;
		transform: translate(-50%,-50%);
	}
	.vi_clock_tickMark{
		position: absolute;
		transform: translate(-50%,-50%);
	}
	.vi_clock_hide{
		opacity: 0;
	}
	.vi_clock_part{
		position: absolute;
		left: 50%;
		top:70%;
		transform: translate(-50%,-50%);
	}
	.vi_clock_origin{
		position: absolute;
		left: 50%;
		top:50%;
		z-index: 1;
		transform: translate(-50%,-50%);
	}
	.vi_clock_hourHand,
	.vi_clock_minuteHand,
	.vi_clock_secondHand{
		position: absolute;
		left: 50%;
		top:50%;
		transform-origin: 0 50%;
		// transition: transform 0.3s;使用动画会出现回转的现象，解决回转问题花费的代价过高
		width: calc(50% - 1em);
		display: flex;
	}
	.vi_clock_pointer{
		position: relative;
	}
	.vi_clock_secondHand{
		justify-content: flex-end;
	}
	.vi_clock_toolbar{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.vi_clock_toolbox{
			padding: 0 0.25em;
			&:first-child{
				padding-left: 0;
			}
			&:last-child{
				padding-right: 0;
			}
		}
		.vi_clock_toolStraight{
			display: flex;
			align-items: stretch;
			.vi_clock_valueBox{
				flex-grow: 1;
			}
		}
		.vi_clock_valueBox{
			border: 1px solid #eee;
			.vi_clock_roller{
				width: 100%;
				height: 2em;
			}
			.vi_clock_value{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 2em;
				color: #666;
			}
		}
		.vi_clock_valueSpace{
			margin-left: 0.25em;
		}
		.vi_clock_tip{
			padding: 0 0.75em;
		}
	}
	.vi_clock_submitBtn{
		width: 100%;
		order: 4;
		margin-top: 1em;
	}
}
</style>